<template>
  <div
    class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden relative"
    v-if="performance"
  >
    <!-- 弹窗组件 -->
    <!-- <CloudPopup
      :showModal="showCloudPopup"
      @close-popup="showCloudPopup = false"
    ></CloudPopup> -->

    <div class="flex-1 mr-2 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 横向柱状图v1 -->
      <!-- <HorizontalBar class="h-1/2 box-border pb-4" :data="data.regionData" /> -->
      <!-- 时间 -->
      <TimeShow class="h-1/5 box-border pb-4" />
      <!-- 横向柱状图v2 -->
      <HorizontalBar
        class="h-3/5 box-border pb-4"
        :data="todyPackQuantilitydata.data.regionData"
      />
      <!-- 雷达图v1 -->
      <!-- <RadarBar class="h-1/4 box-border pb-4" :data="data.riskData" /> -->
      <!-- 雷达图v2 -->
      <RadarBar
        class="h-1/5 box-border pb-4"
        :data="todyPackQuantilitydata.data.regionData"
      />
      <!-- 数据传递关系图 -->
      <!-- <Relation class="h-1/4" :data="data.relationData" /> -->
    </div>
    <div class="w-1/2 mr-2 flex flex-col">
      <!-- 数据展示图s1 -->
      <TotalData class="bg-opacity-50 bg-slate-800 p-3" />
      <div class="bg-opacity-50 bg-slate-800 p-3 mt-1">
        <div class="mt-3 flex flex-wrap">
          <!-- <div class="iso" @click="showPopup = true">伊索</div> -->
          <div
            :class="{ iso: true, redBlink: yisuoshouldBlink }"
            @click="showPopup = true"
          >
            伊索
          </div>
          <div
            :class="{ iso: true, redBlink: oxshouldBlink }"
            @click="showPopupOX = true"
          >
            欧信
          </div>
          <div
            :class="{ iso: true, redBlink: yunshangshouldBlink }"
            @click="showPopupYunShang = true"
          >
            云上
          </div>
          <div
            :class="{ iso: true, redBlink: yipingshouldBlink }"
            @click="showPopupYiPi = true"
          >
            艺品
          </div>
          <div
            :class="{ iso: true, redBlink: shaimeishouldBlink }"
            @click="showPopupShaiMei = true"
          >
            晒美
          </div>
        </div>
      </div>
      <MapChart2
        class="bg-opacity-50 bg-slate-800 p-3 mt-2 flex-1"
        :data="category.data"
      />
    </div>
    <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 环形资源站比图 -->
      <!-- <RadiueBar class="h-1/4 box-border pb-4" :data="data.abnormalData" /> -->
      <RadiueBar2 class="h-1/4 box-border pb-4" :data="performance.data" />
      <!-- 竖向柱状图 -->
      <VerticalBar
        class="h-1/4 box-border pb-4"
        :data="warnMsgNum.data.dailyWarnMsgs"
        :sum="warnMsgNum.data.totals"
      />

      <!-- 文档云图 v1-->
      <!-- <WordCloud class="h-1/2 box-border" :data="data.wordCloudData" /> -->
      <!-- 报警信息 v2-->
      <WarrnMsg class="h-1/2 box-border pb-4" :data="warnMsg.data.warnData" />
    </div>
  </div>

  <!-- 弹窗组件s2 -->
  <div v-if="showPopup" class="popup-overlay">
    <div class="popup-content">
      <button class="close-button" @click="showPopup = false">关闭</button>
      <p>伊索</p>
      <div class="section-container">
        <div class="left-section">
          <OperationMsgFormApp2
            v-if="opRecord"
            class="h-full w-full"
            :data="opRecord.data.warnData"
          />
        </div>
        <div class="middle-section">
          <HorizontalBarTop
            class="h-full w-full"
            style="margin: 15px"
            :data="popUpMdiddle.data"
          />
        </div>
        <div class="right-section">
          <OverHaul
            v-if="overHaulData"
            class="h-full w-full"
            :data="overHaulData.data.data"
            :partData="partData.data.data"
            :customerNameData="overHaulData.data.name"
          />
        </div>
      </div>
    </div>
  </div>

  <div v-if="showPopupOX" class="popup-overlay">
    <div class="popup-content">
      <button class="close-button" @click="showPopupOX = false">关闭</button>
      <p>欧信</p>
      <div class="section-container">
        <div class="left-section"></div>
        <div class="middle-section">
          <HorizontalBarTop
            class="h-full w-full"
            style="margin: 15px"
            :data="popUpMdiddle.data"
          />
        </div>
        <div class="right-section">
          <OverHaul
            v-if="overHaulData"
            class="h-full w-full"
            :data="overHaulData.data.data"
            :partData="partData.data.data"
            :customerNameData="overHaulData.data.name"
          />
        </div>
      </div>
    </div>
  </div>

  <div v-if="showPopupYunShang" class="popup-overlay">
    <div class="popup-content">
      <button class="close-button" @click="showPopupYunShang = false">
        关闭
      </button>
      <p>云上</p>
      <div class="section-container">
        <div class="left-section"></div>
        <div class="middle-section">
          <HorizontalBarTop
            class="h-full w-full"
            style="margin: 15px"
            :data="popUpMdiddle.data"
          />
        </div>
        <div class="right-section">
          <OverHaul
            v-if="overHaulData"
            class="h-full w-full"
            :data="overHaulData.data.data"
            :partData="partData.data.data"
            :customerNameData="overHaulData.data.name"
          />
        </div>
      </div>
    </div>
  </div>

  <div v-if="showPopupYiPi" class="popup-overlay">
    <div class="popup-content">
      <button class="close-button" @click="showPopupYiPi = false">关闭</button>
      <p>艺品</p>
      <div class="section-container">
        <div class="left-section"></div>
        <div class="middle-section">
          <HorizontalBarTop
            class="h-full w-full"
            style="margin: 15px"
            :data="popUpMdiddle.data"
          />
        </div>
        <div class="right-section">
          <OverHaul
            v-if="overHaulData"
            class="h-full w-full"
            :data="overHaulData.data.data"
            :partData="partData.data.data"
            :customerNameData="overHaulData.data.name"
          />
        </div>
      </div>
    </div>
  </div>
  <div v-if="showPopupShaiMei" class="popup-overlay">
    <div class="popup-content">
      <button class="close-button" @click="showPopupShaiMei = false">
        关闭
      </button>
      <p>晒美</p>
      <div class="section-container">
        <div class="left-section"></div>
        <div class="middle-section">
          <HorizontalBarTop
            class="h-full w-full"
            style="margin: 15px"
            :data="popUpMdiddle.data"
          />
        </div>
        <div class="right-section">
          <OverHaul
            v-if="overHaulData"
            class="h-full w-full"
            :data="overHaulData.data.data"
            :partData="partData.data.data"
            :customerNameData="overHaulData.data.name"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import HorizontalBar from "./components/HorizontalBar.vue";
import RadarBar from "./components/RadarBar.vue";
import Relation from "./components/Relation.vue";
import TotalData from "./components/TotalData.vue";
import MapChart from "./components/MapChart.vue";
import VerticalBar from "./components/VerticalBar.vue";
import RadiueBar from "./components/RadiueBar.vue";
import RadiueBar2 from "./components/RadiueBar2.vue";
import WordCloud from "./components/WordCloud.vue";
import WarrnMsg from "./components/WarrnMsg.vue";
import MapChart2 from "./components/MapChart2.vue";
import TimeShow from "./components/timeshow.vue";
import HorizontalBarTop from "./components/HorizontalBarTop.vue";
import OperationMsgFormApp2 from "./components/OperationMsgFormApp2.vue";
import OverHaul from "./components/OverHaul.vue";

//接口
import { ref, onMounted, onUnmounted, watch } from "vue";
import { getVisualization } from "@/api/visualization.js";
import {
  getTodayPackagesQuantilityApi,
  getCurrentWarnMsg,
  getTodayWarnMsgNum,
  getCategory,
  getPerformanceApi,
  getStockByNameApi,
  findStockRemindLength01Api,
  getOpRecordsApi,
  getOverHaulApi,
  getPartInApi,
  getPartInApiByName,
} from "./api/packaging.js";
import { RouterView } from "vue-router";

//统一定义常量
const data = ref(null);
const todyPackQuantilitydata = ref(null);
const warnMsg = ref(null);
const warnMsgNum = ref(null);
const category = ref(null);
const performance = ref(null);
const popUpMdiddle = ref(null);
const overHaulData = ref(null);
const partData = ref(null);
//弹窗开关s3
//伊索
const showPopup = ref(false);
//欧信
const showPopupOX = ref(false);
//云上
const showPopupYunShang = ref(false);
//艺品
const showPopupYiPi = ref(false);
//晒美
const showPopupShaiMei = ref(false);

// const loadData = async () => {
//   data.value = await getVisualization();
// };
// loadData();
const opRecord = ref(null);

const loadDataV2 = async () => {
  todyPackQuantilitydata.value = await getTodayPackagesQuantilityApi();
  warnMsg.value = await getCurrentWarnMsg();
  const responseWarnMsgNum = await getTodayWarnMsgNum();
  opRecord.value = await getOpRecordsApi();

  // 检查 totals 是否为 0，如果是，则使用默认数据
  if (
    responseWarnMsgNum &&
    responseWarnMsgNum.data &&
    responseWarnMsgNum.data.totals === 0
  ) {
    warnMsgNum.value = {
      data: {
        dailyWarnMsgs: [
          {
            count: 1,
            machine_name: "默认",
          },
        ],
        totals: 1,
      },
    };
  } else {
    warnMsgNum.value = responseWarnMsgNum;
  }
};
loadDataV2();

//客户名料仓报警
const yunshangshouldBlink = ref(false);
const yipingshouldBlink = ref(false);
const oxshouldBlink = ref(false);
const shaimeishouldBlink = ref(false);
const yisuoshouldBlink = ref(false);
//料仓是否报警
const stockData = async () => {
  const response = await findStockRemindLength01Api("云上");
  const response2 = await findStockRemindLength01Api("艺品");
  const response3 = await findStockRemindLength01Api("欧信");
  const response4 = await findStockRemindLength01Api("晒美");
  const response5 = await findStockRemindLength01Api("伊索");
  if (response.data.symbol === 1) {
    yunshangshouldBlink.value = true;
  } else {
    yunshangshouldBlink.value = false;
  }
  if (response2.data.symbol === 1) {
    yipingshouldBlink.value = true;
  } else {
    yipingshouldBlink.value = false;
  }
  if (response3.data.symbol === 1) {
    oxshouldBlink.value = true;
  } else {
    oxshouldBlink.value = false;
  }
  if (response4.data.symbol === 1) {
    shaimeishouldBlink.value = true;
  } else {
    shaimeishouldBlink.value = false;
  }
  if (response5.data.symbol === 1) {
    yisuoshouldBlink.value = true;
  } else {
    yisuoshouldBlink.value = false;
  }
  performance.value = await getPerformanceApi();
};
stockData();
//不那么重要的数据（减少查询次数）
const noImportantData2 = async () => {
  category.value = await getCategory();
};
noImportantData2();
//10分钟读取一次
setInterval(() => {
  noImportantData2();
}, 600010);

//11秒读取一次
setInterval(() => {
  // loadData();
  loadDataV2();
}, 11000);

//15秒读取一次
setInterval(() => {
  stockData();
}, 15000);

//点击栏目触发的方法
const getStockByName = async (name) => {
  popUpMdiddle.value = await getStockByNameApi(name);
};
const getOverHaulByName = async (name) => {
  overHaulData.value = await getOverHaulApi(name);
};
// const getPartIn = async () => {
//   partData.value = await getPartInApi();
// };
const getPartInByName = async (name) => {
  partData.value = await getPartInApiByName(name);
};

// const getOpRecord =async()=>{
//   opRecord.value = await getOpRecordsApi();
// }

//监听弹窗开关s4
watch(showPopup, (newValue, oldValue) => {
  if (newValue) {
    getStockByName("伊索");
    getOverHaulByName("伊索");
    getPartInByName("伊索");
    // getOpRecord();
  }
});
watch(showPopupOX, (newValue, oldValue) => {
  if (newValue) {
    getStockByName("欧信");
    getOverHaulByName("欧信");
    getPartInByName("欧信");
  }
});
watch(showPopupYunShang, (newValue, oldValue) => {
  if (newValue) {
    getStockByName("云上");
    getOverHaulByName("云上");
    getPartInByName("云上");
  }
});
watch(showPopupYiPi, (newValue, oldValue) => {
  if (newValue) {
    getStockByName("艺品");
    getOverHaulByName("艺品");
    getPartInByName("艺品");
  }
});
watch(showPopupShaiMei, (newValue, oldValue) => {
  if (newValue) {
    getStockByName("晒美");
    getOverHaulByName("晒美");
    getPartInByName("晒美");
  }
});
</script>


<style scoped>
/* 如果你想将样式定义在组件内部 */
.relative {
  position: relative;
}
.redBlink {
  color: red;
  animation: blink 1s linear infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 弹窗样式 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 提高 z-index 值 */
}
.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 1600px; /* 设置最大宽度以适应不同屏幕大小 */
  height: 600px; /* 或者指定一个具体的高度 */
  background-color: rgba(22, 32, 53, 0.7);
  padding: 20px;
  border-radius: 5px;
  z-index: 1001;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: white;
}
.iso:hover {
  cursor: pointer;
}
.iso {
  margin-right: 10px;
}
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
}
.section-container {
  display: flex;
  margin-top: 20px; /* 与上面的文本保持一定距离 */
  height: 90%; /* 设置一个固定高度 */
  gap: 10px; /* 设置左右部分与中间部分之间的间隔 */
}

.left-section {
  flex: 2;
  background-color: rgba(11, 16, 29, 0.8); /* 添加透明度 */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.middle-section {
  flex: 3;
  background-color: rgba(11, 16, 29, 0.8); /* 添加透明度 */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-section {
  flex: 2;
  background-color: rgba(11, 16, 29, 0.8);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 上面 弹窗样式 */
</style>